<template>
  <div class="app-container">


    <el-dialog :title="title" :visible.sync="visible" width="700px" append-to-body @close="close">
      <el-form ref="form" :model="form" label-width="100px" :rules="rules">

        <el-form-item  label="选择车辆" prop="carLicenceNum" >
          <div  @click="showCarBox = true">
            <el-input style="width: 400px;" v-model="form.carLicenceNum" placeholder="请选择车辆" clearable :readonly="true" >
              <el-button slot="append" icon="el-icon-search" @click="showCarBox = true"></el-button>
            </el-input>
          </div>

        </el-form-item>

        <el-form-item  label="选择时间" prop="daterange">
          <el-date-picker v-model="form.daterange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item  label="选择平台" prop="sourceCodes">
          <el-checkbox-group v-model="form.sourceCodes">
            <el-checkbox v-for="(item, index) in originList" :key="index" :label="item.dictValue"
              :name="item.dictValue">{{
                item.dictLabel }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

      </el-form>
      <span slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="commit">确定</el-button>
      </span>

    </el-dialog>
    <select-car v-model="showCarBox" @success="selectCarInfo"></select-car>
  </div>
</template>

<script>
import selectCar from '../../../components/selectCar.vue'
import * as otaApi from '@/api/ota/ctrip';
export default {
  components: {
    selectCar,
  },
  data() {
    return {

      title: '库存占用',
      visible: false,
      showCarBox: false,
      form: {
        workOrderType: '',
        sourceCode: '',
        sourceCodes: [],
        carLicenceNum: '',
        carModelId: '',
        carUsageStartTime: '',
        carUsageEndTime: '',
        orderEncryptId: null,
        daterange: [],
      },
      originList: [],
      // 表单校验
      rules: {
        carLicenceNum: [
          {
            required: true,
            message: '车牌号不能为空',
            trigger: 'blur',
          },
        ],
        daterange: [
          {
            required: true,
            message: '请选择占用时间',
            trigger: 'blur',
          },
        ],
        sourceCodes: [
          {
            required: true,
            message: '请至少选择一个占用平台',
            trigger: 'change',
          },
        ]
      },
    };
  },

  mounted() {
    this.getOriginList();
  },
  methods: {
    selectCarInfo(car) {
      this.showCarBox = false
      if (car) {
        this.form.carModelId = car.modelId;
        this.form.carLicenceNum = car.carNo;
      }
    },
    getOriginList() {
      this.getDicts('ota_order_resource').then(res => {
        this.originList = res.data
      })
    },
    commit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.carUsageStartTime = this.form.daterange[0];
          this.form.carUsageEndTime = this.form.daterange[1];
          this.form.sourceCode = this.form.sourceCodes.join(',');
          otaApi.addOTAWorkorder(this.form).then(res => {
            this.visible = false;
            this.$emit('success');
          })
        }
      })
    },
    show(type) {
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      })
      this.title = type == 1 ? '库存占用' : '库存释放';
      this.form.workOrderType = type;
      this.visible = true;
    },
    close() {
      this.visible = false;
    }
  },
};
</script>

<style scoped>
.bottom-layout {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 40px 0 0;
}
</style>
